<template>
  <div class="backimg_frame">
    <el-row>
      <el-col v-for="v in back_imgs" :key="v.url" :span="6" :offset="1">
        <el-tooltip placement="top">
          <div slot="content">{{ v.name }}</div>
          <el-image class="el-image-back"
            style="width: 80%; height: 60%"
            :src="v.url"
            @click="set_back_img_orgin(v)"
          ></el-image>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BackImg",
  data() {
    return {
      back_imgs: [
        { name: "经典背景", url: "../assets/main_back_2.jpg" },
        { url: "../assets/main_back_1.jpg", name: "缤纷背景" },
        { url: "../assets/main_back_3.jpg", name: "奇幻背景" },
      ],
    };
  },
  methods: {
    set_back_img_orgin(img) {
      this.$pubsub.publish("set_back_img", img);
    },
  },
};
</script>

<style scoped lang="less">
.backimg_frame{
  padding-top: 5%;
  float: left;
  width: 89%;
  height: 100%;
}
.el-image-back {
  border: 2px solid #ccc;
  border-radius: 3%;
}
</style>